<template>
	<view class="">
		<view class="">
			<view class="bg-white   b_y hede-Bottom-line">
				<view class="banmi_flex a-c p-10 f-14" style="border-bottom: solid 2rpx #F5F5F5;height: 60rpx;">
					<view class="p-10 c-text">
						版本信息
					</view>
				</view>
				<view class="p-10">
					<view class="banmi_flex a-c p-10">
						<view class="f-14 c-text" style="width: 200rpx;">
							当前版本
						</view>
						<view class="f-14 c-text">
							V{{info.system_version}}
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="f-14 c-text" style="width: 200rpx;">
							框架
						</view>
						<view class="f-14 c-text">
							thinkphp8,uniapp,mysql
						</view>
					</view>
					<view class="banmi_flex a-c p-10">
						<view class="f-14 c-text" style="width: 200rpx;">
							官方
						</view>
						<view class="f-14 c-text">
							怎快后台管理系统
						</view>
					</view>
				</view>
			</view>

			<view class="bg-white  hede-Bottom-line b_y">
				<view class="banmi_flex a-c p-10 f-14" style="border-bottom: solid 2rpx #F5F5F5;height: 60rpx;">
					<view class="p-10 c-text">
						今日数据
					</view>
				</view>
				<view class="banmi_flex " style="flex-wrap: wrap;">
					<view class="p-10">
						<view class="banmi_flex a-c p-10">
							<view class="f-14 c-text" style="width: 200rpx;">
								今日访问量
							</view>
						</view>
						<view class="banmi_flex a-c p-10">
							<view class="f-28 w800  cred">
								{{find.today_visitors_count?find.today_visitors_count:0}}
							</view>
						</view>
						<view class="banmi_flex a-c p-10">
							<view class="f-14 c-text" style="width: 250rpx;">
								总访问量<text class="m-l-10">{{find.visitors_count?find.visitors_count:0}}</text>
							</view>

						</view>
					</view>
					<view class="p-10">
						<view class="banmi_flex a-c p-10">
							<view class="f-14 c-text" style="width: 250rpx;">
								今日新增用户(人)
							</view>
						</view>
						<view class="banmi_flex a-c p-10">
							<view class="f-28 w800  cred">
								{{find.today_user_count?find.today_user_count:0}}
							</view>
						</view>
						<view class="banmi_flex a-c p-10">
							<view class="f-14 c-text" style="width: 250rpx;">
								总用户 <text class="m-l-10">{{find.user_count}}</text>
							</view>

						</view>
					</view>
					<view class="p-10">
						<view class="banmi_flex a-c p-10">
							<view class="f-14 c-text" style="width: 250rpx;">
								插件数
							</view>
						</view>
						<view class="banmi_flex a-c p-10">
							<view class="f-28 w800  cred">
								{{find.plugin_count}}
							</view>
						</view>
					</view>


				</view>

			</view>
		</view>
		<view class="hede-Bottom-line">
			<view class="charts-box bg-white ">
				<view class="banmi_flex a-c p-10 f-14" style="border-bottom: solid 2rpx #F5F5F5;height: 60rpx;">
					<view class="p-10 c-text">
						访客统计
					</view>
				</view>
				<view class="p-10">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>



	</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				find: {},
				info: {},
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 15, 10],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			async init() {
				const ret = await this.Banmikeji.statistics({});
				this.find = ret.data
				this.visitors_list = this.find.visitors_list;
				this.init_info();
				this.the_day();
			},
			async init_info() {
				const ret = await this.Banmikeji.info_ajax({});
				this.info = ret.data.info
				uni.setStorage({
					key: 'system_version',
					data: this.info.system_version
				});
				uni.setStorage({
					key: 'pc_web',
					data: this.info.pc
				});
			},
			getServerData(categories, series_data) {
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: categories,
						series: [{
							name: "访客数",
							data: series_data,
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},


			the_day() {
				// 获取当前时间
				var currentDate = new Date();

				// 定义存放日期数组的变量
				var datesArray = [];
				var series_data = [];

				for (let i = 9; i >= 0; i--) {
					// 创建新的日期对象并设置为当前日期减去i天
					var dateObj = new Date(currentDate.getTime() - i * 24 * 60 * 60 * 1000);

					// 将日期格式化为字符串形式（YYYY-MM-DD）
					var formattedDate =
						`${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;

					// 添加到数组中
					datesArray.push(formattedDate);
					var num = this.for_visitors_list(formattedDate);

					series_data.push(num);
				}
				this.getServerData(datesArray, series_data);
			},
			for_visitors_list(formattedDate) {
				var num = 0;
				for (var i = 0; i < this.visitors_list.length; i++) {
					var day = this.visitors_list[i]['day'].split("|");
					if (day[1] == formattedDate) {
						num = num + this.visitors_list[i]['num'];
					}
				}
				return num;
			}

		}
	}
</script>

<style>
	.charts-box {
		width: 100%;
		height: 300px;


	}

	.banmi_info_view {
		display: flex !important;
		display: -webkit-flex !important;
		display: -webkit-box;
		padding: 20px 20px;
		border-bottom: solid 1px #F6F6F6;

		.bm_view {
			font-size: 14px;
			color: #A9A9A9;
			width: 160px;
		}

		.bm_text {
			font-size: 14px;
			color: #333;
			flex: 1;
			width: 100%;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			overflow: hidden;
			lines: 1;
			text-overflow: ellipsis;
		}
	}
</style>